<!--
//
// Trigger.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/11.
//
-->
<template>
    <div class="Index">

        <!-- 内容 -->
        <div class="container">
            <el-tabs v-model="state.canUsed" @tabChange="searchClicked">
                <el-tab-pane :name="1" label="可用"/>
                <el-tab-pane :name="0" label="待审核"/>
                <el-tab-pane :name="2" label="已锁定"/>
                <el-tab-pane :name="99" label="未知"/>
            </el-tabs>
            <!-- 筛选区 -->
            <table-search-bar :config="requestBodyConfig" :model="requestBody" @search="searchClicked" style="border: none;box-shadow: none;padding: 0!important;">
                <template #before>
                    <el-button v-permission="permission.add" type="primary" @click="addData">
                        <b-icon name="bi-plus" size="20" />
                        添加
                    </el-button>
                </template>
            </table-search-bar>
            <!-- 功能按钮 -->
            <div class="table-buttons">

            </div>
            <!--checkbox设置 :checkbox-config="{trigger: 'row', highlight: true}" -->
            <!--radio设置 :radio-config="{trigger: 'row', highlight: true}" -->
            <vxe-table ref="VXETable" :column-config="{ resizable: false}" :data="state.list" :height="tableHeight" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}" :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @current-change="() => {}" @radio-change="() => {}">
                <template #empty>
                    <el-empty :image-size="100" />
                </template>
                <vxe-column fixed="left" title="#" type="seq" width="50" />
                <vxe-column field="name" :fixed="$fixedColumn('left')" min-width="200" title="电脑名称"></vxe-column>
                <vxe-column field="mac" width="240" title="Mac地址"></vxe-column>
                <vxe-column field="lastIP" width="140" title="最后登录IP"></vxe-column>
                <vxe-column field="region" min-width="220" title="所属区域"></vxe-column>
                <vxe-column field="xrfType" min-width="160" title="探测器类型"></vxe-column>
                <vxe-column field="programCode" min-width="160" title="程序编号"></vxe-column>
                <vxe-column field="programType" title="客户端类型" width="120" align="center">
                    <template #default="{row}">
                        <el-tag v-if="row.programType === 1" effect="dark" type="primary">单样品</el-tag>
                        <el-tag v-if="row.programType === 2" effect="dark" type="warning">多样品</el-tag>
                        <el-tag v-if="row.programType === 3" effect="dark" type="success">水泥版</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="ipChange" title="IP变更" width="120" align="center">
                    <template #default="{row}">
                        <el-tag v-if="row.ipChange" effect="dark" type="primary">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="isDebugPC" title="测试电脑" width="120" align="center">
                    <template #default="{row}">
                        <el-tag v-if="row.isDebugPC" effect="dark" type="primary">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="canUsed" title="使用状态" width="120" align="center">
                    <template #default="{row}">
                        <el-tag v-if="row.canUsed === 0" type="info">未授权</el-tag>
                        <el-tag v-if="row.canUsed === 1" effect="dark" type="success"><el-icon style="margin-right: 2px;transform: translateY(1px)"><CircleCheck /></el-icon><span>可用</span></el-tag>
                        <el-tag v-if="row.canUsed === 2" effect="dark" type="danger"><el-icon style="margin-right: 2px;transform: translateY(1px)"><Lock /></el-icon><span>已锁定</span></el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="algorithmType" min-width="180" title="算法类型" align="center">
                    <template #default="{row}">
                        <el-tag v-if="row.algorithmType===0" type="info">无</el-tag>
                        <el-tag v-if="row.algorithmType===1" type="primary">标准取样法</el-tag>
                        <el-tag v-if="row.algorithmType===2" type="warning">基本参数法</el-tag>
                        <el-tag v-if="row.algorithmType===3" type="success">标准取样法&基本参数法</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="authorizationType" min-width="120" title="授权类型" align="center">
                    <template #default="{row}">
                        <el-tag v-if="row.authorizationType===0" type="info">未授权</el-tag>
                        <el-tag v-if="row.authorizationType===1" type="success">永久授权</el-tag>
                        <el-tag v-if="row.authorizationType===2" type="warning">天数授权</el-tag>
                        <el-tag v-if="row.authorizationType===3" type="primary">截止时间授权</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="deadline" title="到期时间" width="180" align="center">
                    <template #default="{row}">
                        <EndDate :item="row"/>
                    </template>
                </vxe-column>
                <vxe-column field="description" min-width="250" title="备 注"></vxe-column>
                <vxe-column :resizable="false" field="action" fixed="right" title="操作" :width="$widthColumn(190)">
                    <template #default="{row}">
                        <table-action :actions="[
                            {title: '详情', type: 'success', ok: toDetails},
                            {title: '修改', permission: permission.edit, type: 'primary', ok: editData},
                            {title: '解锁', permission: permission.audit, show: row.canUsed === 2, type: 'success', ok: unLockData},
                            {title: '锁定', permission: permission.audit, show: row.canUsed === 1, type: 'danger', ok: lockData},
                            {title: '删除', permission: permission.delete, type: 'danger', ok: deleteData, confirm: '您确定要删除当前数据么?', inMore: true},
                            {title: '电脑授权', permission: permission.authorize, type: 'success', ok: authorizeData, inMore: true},
                            {title: '下载License', permission: permission.downloadLicense, type: 'warning', ok: downloadLicense, inMore: true},
                        ]" :data="row" />
                    </template>
                </vxe-column>
            </vxe-table>
            <div class="page-config">
                <vxe-pager v-model:current-page="requestParams.pageIndex" v-model:page-size="requestParams.pageSize" :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" :page-sizes="pageConfig.sizes" :total="pageConfig.total" background size="mini" @page-change="onPageChange" />
<!--                <vxe-pager v-model:current-page="requestParams.pageIndex" v-model:page-size="requestParams.pageSize" :layouts="['PrevPage', 'JumpNumber', 'NextPage']" :page-sizes="pageConfig.sizes" :total="pageConfig.total" background size="mini" @page-change="onPageChange" />-->
            </div>
        </div>
        <EditForm ref="editForm" />
        <Authorize ref="authorize" />
        <Audit ref="audit" />
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js"
import EditForm from "./EditForm.vue"
import Authorize from "./Authorize.vue"
import Audit from "./Audit.vue"
import TableAction from "@/components/TableActions/TableAction.vue";
import TableSearchBar from "@/components/TableSearchBar/TableSearchBar.vue";
import EndDate from "./Components/EndDate.vue"

const {$message, $format, $dayjs, $fixedColumn, $widthColumn} = window;

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();
const tableHeight = computed(() => store.getters.layoutType === "mobile" ? "" : store.getters.containerHeight - 196)
// 响应式数据
const state = reactive({
    // 表格数据加载中
    isLoading: false,
    // 表格数据
    list: [],
    canUsed: 1
})

// 当前页面功能权限
const permission = {
    add: "Computer:AddComputerInfo",
    delete: "Computer:DeleteComputerInfo",
    edit: "Computer:UpdateComputerInfo",
    audit: "Computer:UpdateComputerCanUse",
    authorize: "Computer:CreateDeviceLicense",
    downloadLicense: "Computer:DownloadLicenseById"
};

// 请求query参数
const requestParams = reactive({
    orderCol: "id",
    isDesc: true,
    pageIndex: 1,
    pageSize: 20,
});
// 请求body参数
const requestBody = reactive({})
// 筛选区域配置
const requestBodyConfig = reactive({
    name: {label: "主机名称", component: "el-input"},
    mac: {label: "Mac 地址", component: "el-input"},
    isDebugPC: {label: "是否测试主机", component: "el-select", data: [{name: "是", value: true}, {name: "否", value: false}]},
})
// 分页配置
const pageConfig = reactive({
    total: 0,
    sizes: [10, 20, 50, 100, 200]
})

const audit = ref()
function unLockData(row) {
    audit.value.show({
        title: "解锁",
        options: {...row, canUsed: 1},
        ok() {
            reload()
        }
    })
}
function lockData(row) {
    audit.value.show({
        title: "锁定",
        options: {...row, canUsed: 2},
        ok() {
            reload()
        }
    })
}

function toDetails(row) {
    router.push(`/?page=/DeviceManage/Computer/Details&id=${row.id}&titleName=${row.name}&only=1`);
}

/**
 * 下载 License
 * @param row
 */
async function downloadLicense(row) {
    await api.DownloadLicense({mac: row.mac}, `${row.name }License.license`);
}

/**
 * 电脑授权
 */
const authorize = ref()

function authorizeData(row) {
    authorize.value.show({
        title: "电脑授权",
        options: {...row},
        ok() {
            reload()
        }
    })
}

const editForm = ref();

// 添加
function addData() {
    editForm.value.show({
        title: "添加",
        options: {},
        ok: () => {
            state.canUsed = 0
            reload(true);
        }
    })
}

// 删除
async function deleteData({id}) {
    console.danger("删除: ", id)
    const {success, data} = await api.DeleteComputerInfo({id});
    if (!success) return 0;
    reload();
    $message.success("删除成功")
}

// 修改
function editData(row) {
    editForm.value.show({
        title: "修改",
        options: {...row},
        ok: () => {
            reload();
        }
    })
}

// 点击搜索
function searchClicked() {
    console.primary("搜索条件: ", requestBody)
    reload(true);
}


// 查询列表
async function loadList() {
    const params = {
        ...requestParams
    };
    const body = {
        ...requestBody,
        canUsed: state.canUsed
    };
    state.isLoading = true;
    const {success, data} = await api.GetComputerPageList(params, body);
    state.isLoading = false;
    if (!success) return 0;
    const {items, totalCount} = data;
    state.list = items;
    pageConfig.total = totalCount;
}

// 分页事件
function onPageChange({type}) {
    if (type === "current") {
        loadList()
    }
    if (type === "size") {
        reload(true)
    }
}

// 刷新
function reload(resetPageIndex) {
    if (resetPageIndex) requestParams.pageIndex = 1;
    loadList()
}


onMounted(() => {
    // api.GetProgramList({}).then(({data}) => {
    //     requestBodyConfig.programId.data = (data || []).map((item) => {
    //         item.value = item.id;
    //         return item;
    //     });
    // })
    loadList()
})
</script>

<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;

    .container {
        padding: 0 10px 10px 10px;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
    }
}
</style>
